<template>
  <section>
    <div class="model retrieval">
      <img :src="IMGBASE64.JIANSUOGUANLI2X" class="orange">
      <span class="title">检索管理</span>
      <div class="body">
        <span>学期:</span>
        <select class="semester-select" v-model="semesterSelect" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option v-for="item in semesterOption" :label="item.termName" :value="item.termName"></option>
        </select>
        <span>年级:</span>
        <select class="select" v-model="gradeSelect" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option v-for="(item, key) in gradeOption" :label="item" :value="item"></option>
        </select>
        <!-- <span>获奖级别:</span>
        <select class="select" v-model="RankSelect" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option v-for="(item, key) in RankOption" :label="item" :value="item"></option>
        </select> -->
        <span>获奖等级:</span>
        <select class="select" v-model="LevelSelect" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option v-for="(item, key) in LevelOption" :label="item" :value="item"></option>
        </select>
        <div class="middle">
          <el-input placeholder="请输入学生姓名" class="middle-text" v-model="studentName" size="small"></el-input>
          <el-button type="primary" size="small" @click="getTableData">搜索</el-button>
          <el-button type="primary" size="small">导出</el-button>
        </div>
      </div>
    </div>
    <div class="model management">
      <img :src="IMGBASE64.XUESHENGCHENGGUOCHAXUN2X" class="pink">
    	<span class="title">学生成果查询</span>
    	<div class="kong"></div>
    	<template>
    		<el-table :data="tableData" style="width: 100%" @row-click="showDetails">
    			<el-table-column prop="competitionName" label="竞赛名称" min-width="200" align="center" :show-overflow-tooltip='true'></el-table-column>
    			<el-table-column prop="worksName" label="作品名称" min-width="120" align="center"></el-table-column>
    			<el-table-column prop="gradeName" label="年级号" min-width="80" align="center"></el-table-column>
    			<el-table-column prop="clazz" label="班级" min-width="70" align="center"></el-table-column>
    			<el-table-column prop="studentName" label="姓名" min-width="120" align="center"></el-table-column>
    			<el-table-column prop="awardGrade" label="获奖级别" min-width="120" align="center"></el-table-column>
    			<el-table-column prop="awardLevel" label="获奖等级" min-width="120" align="center"></el-table-column>
    			<el-table-column prop="awardTimestr" label="获奖时间" min-width="150" align="center" :show-overflow-tooltip='true'></el-table-column>
    			<el-table-column prop="awardCompany" label="授奖单位" min-width="120" align="center"></el-table-column>
    			<el-table-column prop="guideTeacher" label="指导老师" min-width="120" align="center"></el-table-column>
    		</el-table>
        <el-pagination
          v-show="paging"
          @current-change="handleCurrentChange"
          :page-size="20"
          layout="prev, pager, next, jumper"
          :total="total"
          class="pull-right">
        </el-pagination>
    	</template>
    </div>

    <div class="details" v-show="isDetails">
      <img :src="IMGBASE64.XIANGQING2X" class="icon">
      <span class="title">详情</span>
      <el-button icon="el-icon-close" class="close" @click="upshow()"></el-button>
      <div class="body">
        <el-form label-width="90px">
          <el-col :span="24">
            <el-form-item label="学生姓名">
              <span>{{detailsForm.studentName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年级">
              <span>{{detailsForm.gradeName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="班级">
              <span>{{detailsForm.clazz}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="竞赛名称">
              <span>{{detailsForm.competitionName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="作品名称">
              <span>{{detailsForm.worksName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="获奖级别">
              <span>{{detailsForm.awardGrade}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="获奖等级">
              <span>{{detailsForm.awardLevel}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="授奖单位">
              <span>{{detailsForm.awardCompany}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="指导教师">
              <span>{{detailsForm.guideTeacher}}</span>
            </el-form-item>
          </el-col>
        </el-form>
      </div>
    </div>

    <transition name="modal-shadow">
      <div class="modal-backdrop" v-show="isSuccess"></div>
    </transition>

  </section>
</template>

<script>
export default {
  data () {
    return {
      checked: false,
      upShow: false,
      isSuccess: false,
      isDetails: false,
      tableData: [],
      total: 0,
      page: 1,
      paging: true,
      studentName: null,
      gradeSelect: null,
      gradeOption: [],
      RankSelect: null,
      RankOption: [],
      LevelSelect: null,
      LevelOption: [],
      semesterSelect: null,
      semesterOption: [],
      detailsForm: {
        studentName: null,
        gradeName: null,
        clazz: null,
        competitionName: null,
        worksName: null,
        awardGrade: null,
        awardLevel: null,
        awardCompany: null,
        guideTeacher: null
      }
    }
  },
  mounted () {
    this.getSemesterData()
    this.getGradeData()
    this.getTableData()
    this.getRankData()
    this.getLevelData()
  },
  methods: {
    handleClick () {
      console.log('1')
    },
    upshow () {
      this.isDetails = !this.isDetails
      this.isSuccess = !this.isSuccess
    },
    handleCurrentChange (val) {
      this.page = val
      this.getTableData()
    },
    getTableData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'growth/record/resultsQuery', {page: (this.page), size: 20, gradeName: this.gradeSelect, clazz: this.classSelect, awardLevel: this.RankSelect, awardGrade: this.LevelSelect, studentName: this.studentName}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.tableData = response.data.data.content
          this.total = response.data.data.total
          for (var i = 0; i < this.tableData.length; i++) {
            this.tableData[i].num = i + 1
          }
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getSemesterData () {
      // let httpUrl = 'http://119.23.36.128:8020/yxt-web/'
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'term/all', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.semesterOption = response.data.data.content
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getGradeData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'public/grade/query', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.gradeOption = response.data.data.gradeMap
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getRankData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'growth/record/awardGrade/query', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.RankOption = response.data.data
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getLevelData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'growth/record/awardLevel/query', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.LevelOption = response.data.data
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    detailsShow () {
      this.isDetails = !this.isDetails
      this.isSuccess = !this.isSuccess
    },
    showDetails (rows, column) {
      if (column.label !== '操作') {
        this.detailsForm.studentName = rows.studentName
        this.detailsForm.gradeName = rows.gradeName
        this.detailsForm.clazz = rows.clazz
        this.detailsForm.competitionName = rows.competitionName
        this.detailsForm.worksName = rows.worksName
        this.detailsForm.awardGrade = rows.awardGrade
        this.detailsForm.awardLevel = rows.awardLevel
        this.detailsForm.awardCompany = rows.awardCompany
        this.detailsForm.guideTeacher = rows.guideTeacher
        this.isDetails = !this.isDetails
        this.isSuccess = !this.isSuccess
      }
    },
    clearData () {
      this.RankSelect = null
      this.gradeSelect = null
      this.semesterSelect = null
      this.LevelSelect = null
    }
  }
}
</script>

<style lang="less" scoped>
@import '/static/css/all-use.css';
  .retrieval{
    .body{
      span{
      	margin-left: 2%;
      }
      span:first-child{
      	margin-left: 0;
      }
      .semester-select{
        width: 16%;
        border: 0;
        border-bottom: 1px solid #D7D7D7;
      }
      .select{
        width: 13%;
        border: 0;
        border-bottom: 1px solid #D7D7D7;
      }
      .right{
        width: 25%;
        float: right;
        text-align: right;
        margin-right: 3%;
				&-text{
					width: 58%;
					border: 0;
					border-bottom: 1px solid #D7D7D7;
				}
				.search{
					background: #00A0E8;
					border: 0;
					border-radius: 2px;
					color: #fff;
					padding: 5px 15px;
				}
      }
      .middle{
        width: 35%;
        display: inline-block;
        margin-left: 1%;
        &-text{
          width: 60%;
        }
      }
    }
  }

  .close{
    position: absolute;
    right: 2%;
  }
  .modal-backdrop{
    background: #000;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    opacity: .5;
  }
  .up{
    width: 60%;
    position: fixed;
    top: 0;
    left: 25%;
    padding: 20px;
    z-index: 3;
    .green{
      width: 64px;
      height: 64px;
      position: absolute;
      left: 3%;
      top: -20px;
      background: #0DBF9B;
      border-radius: 4px;
      text-align: center;
      line-height: 80px;
    }
    .title{
      margin-left: 12%;
    }
    .header{
      border-bottom: 2px solid #D7D7D7;
      padding: 30px 0 10px 0;
      margin-left: 3%;
      margin-bottom: 10px;
      .title{
        color: #FB7862;
        border-bottom: 2px solid #FB7862;
        padding: 0 0 10px 0;
        margin-left: 0;
      }
    }
    .bottom{
      border-top: 1px solid #D7D7D7;
      margin-top: 20px;
      background: #F8F8F8;
      padding: 8px 0;
      .left{
        width: 50%;
        display: inline-block;
        margin-left: 2%;
      }
      .right{
        width: 43%;
        display: inline-block;
        text-align: right;
      }
    }
  }
  .error{
    color: #FF4949;
  }
</style>
